<template>
    <div>
        <!-- Calendar   Container -->
        <div class="CalendarContainer">
            <calender-full
                    class="test-fc"
                    :events="fcEvents"
                    :firstDay='0'
                    locale="zh-cn"
                    :isshoetitlt="1"
                    ref="CalChildren"
                    @changeMonth="changeMonth"
                    @eventClick="eventClick"
                    @DayenterFather="DayEnterFather"
                    @DayleaveFather="DayLeaveFather"
                    @moreClick="moreClick">
                <template slot="fc-event-card" slot-scope="p">
                    <p class="EventsTitle"> {{ p.event.title }} </p>
                </template>
            </calender-full>
        </div>
    </div>
</template>
<script>
// Its dataEvents Template Please do not delete
import CalenderFull from '../components/CalenderFull';

const demoEvents = [
  {
    title: 'Example',
    start: '2019-02-08',
    end: '2019-02-28',
  },
];

export default {
  name: 'MyGroupScheduling',
  components: {
    CalenderFull,
  },

  // module: {
  //     loaders: [{
  //         test: /\.js$/,
  //         loader: 'babel',
  //         exclude: /node_modules/
  //     }, {
  //         test: /\.vue$/,
  //         loader: 'vue'
  //     }, {
  //         test: /\.s[a|c]ss$/,
  //         loader: 'style!css!sass'
  //     }]
  // },
  // loaders: {
  //     scss: ['vue-style-loader','css', 'sass'].join('!')
  // },

  data() {
    return {
      fcEvents: demoEvents, // 显示在日历格中的事件
      startTime: '',
      endTime: '',
      fileList: [],
    };
  },
  mounted() {},
  created() {},
  methods: {
    eventClick(event, jsEvent, pos) {
      console.log('eventClick', event, jsEvent, pos);
    },
    // dayClick(day, jsEvent, index) {
    //     //console.log(jsEvent.target);
    //     // 跟随鼠标指针显示，勿删
    //     //    var dx = jsEvent.pageX,
    //     //        dy = jsEvent.pageY;
    //     // $('.Valuationtable').css({"display":"block","left":(dx+10)+"px","top":(dy-40)+"px"});
    //     let allEvent = document.getElementsByClassName("events-day");
    //     let allEventBox = document.getElementsByClassName("RightAlert");
    //     for (let i = 0; i < allEvent.length; i++) {
    //         allEventBox[i].style.display = "none";
    //     }
    //     if (jsEvent.target.className === "event-box") {
    //         $(jsEvent.target.parentNode)
    //             .find(".RightAlert")
    //             .show();
    //     }
    //     if (jsEvent.target.className === "EventsTitle") {
    //         $(jsEvent.target.parentNode.parentNode.parentNode)
    //             .find(".RightAlert")
    //             .show();
    //     }
    //     if (jsEvent.target.className === "day-cell") {
    //         $(jsEvent.target)
    //             .find(".RightAlert")
    //             .show();
    //     }
    //     if (jsEvent.target.className === "day-cell isBgray") {
    //         $(jsEvent.target)
    //             .find(".RightAlert")
    //             .show();
    //     }
    //     if (jsEvent.target.className === "day-cell not-cur-month") {
    //         $(jsEvent.target)
    //             .find(".RightAlert")
    //             .show();
    //     }
    //     if (jsEvent.target.className === "day-cell not-cur-month isBgray") {
    //         $(jsEvent.target)
    //             .find(".RightAlert")
    //             .show();
    //     }
    //     if (jsEvent.target.className === "day-number isCgray") {
    //         $(jsEvent.target.parentNode)
    //             .find(".RightAlert")
    //             .show();
    //     }
    //     if (jsEvent.target.className === "day-number") {
    //         $(jsEvent.target.parentNode)
    //             .find(".RightAlert")
    //             .show();
    //     }
    //     if (jsEvent.target.className === "day-number today") {
    //         $(jsEvent.target.parentNode)
    //             .find(".RightAlert")
    //             .show();
    //     }
    //
    //     if (jsEvent.target.className === "day-number not-cur-month isCgray") {
    //         $(jsEvent.target.parentNode)
    //             .find(".RightAlert")
    //             .show();
    //     }
    //     if (jsEvent.target.className === "day-number not-cur-month") {
    //         $(jsEvent.target.parentNode)
    //             .find(".RightAlert")
    //             .show();
    //     }
    // },
    DayEnterFather(day, jsEvent) {
      console.log('day-jsEvent', day, jsEvent);
      // jsEvent.target.style.boxShadow = ' 0 6px 18px rgba(0, 0, 0, 0.22)';
    },
    DayLeaveFather(day, jsEvent) {
      console.log('day-jsEvent', day, jsEvent);
      // jsEvent.target.style.boxShadow = '0 0 0 0 #fff';
    },
    moreClick(day, events, jsEvent) {
      console.log('moreCLick', day, events, jsEvent);
    },
    changeMonth(start, end, current) {
      console.log('current', current);
      const startTime = start.format().slice(0, 10);
      const endTime = end.format().slice(0, 10);
      this.startTime = startTime;
      this.endTime = endTime;
    },
  },
};
</script>
<style scoped>
    .EventsTitle {
        height: 20px;
    }

    .otcDialog .el-input__inner {
        padding-right: 25px;
    }

    .otcDialog td {
        padding: 0 14px;
        width: 50%;
    }

    .otcDialog .form-parent > form {
        background-color: #fff;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        padding-bottom: 20px;
    }

    .otcDialog .grid-label {
        white-space: nowrap;
        max-width: 250px;
        word-break: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        float: left;
        line-height: 20px;
    }

    .CalendarContainer {
        background: #ffffff;
        margin: 0 20px 0 20px;
        box-shadow: 0 3px 7px #ddd;
    }

    .CalendarSubject {
        margin: 0 20px;
    }

    .dataTile {
        font-size: 20px;
        /*height: 30px;*/
        line-height: 30px;
        font-weight: bold;
        color: #000;
        padding-right: 30px;
    }

    .dataTile .titleTextBefore:before {
        position: relative;
        top: 3.5px;
        content: "";
        display: inline-block;
        width: 5px;
        height: 20px;
        background: #f9a101;
        margin: 0 12px 0 0;
    }

    .FL {
        float: left;
    }

    .titleVertical {
        width: 5px;
        height: 20px;
        background: #f9a101;
        margin: 5px 12px 0 10px;
    }
    .Valuationtable {
        display: none;
        position: absolute;
        z-index: 99999;
        background: #000;
    }

    .Valuationtable .RightAlert {
        background-color: #f9a101;
        padding: 5px 20px 5px 20px;
        border-radius: 5px;
        z-index: 999999;
    }

    .Valuationtable #Triangle {
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-right: 15px solid #f9a101;
        border-bottom: 10px solid transparent;
        position: absolute;
        top: 10px;
        left: -15px;
    }

    .Valuationtable .DetailedAll {
        width: 100%;
        height: 20px;
        line-height: 20px;
        margin-top: 6px;
        text-align: center;
        color: #fff;
    }

    .Valuationtable #DeleteTop {
        width: 25px;
        height: 25px;
        position: absolute;
        top: 3px;
        right: 3px;
        text-align: center;
        line-height: 25px;
        color: #000;
        background: #f3f3f3;
    }

</style>
